<template>
	<div class="Login">
		<form>
			<div class="Login_box">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">账号</div>
						<input type="text" v-model="username" class="form-control" name="username" id="exampleInputAmount_name"
						 placeholder="请输入你的账号">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">密码</div>
						<input type="password" v-model="password" class="form-control" name="password" id="exampleInputAmount_pass"
						 placeholder="请输入你的密码">
					</div>
				</div>
				<div class="login_Tips">
					<span>你是新来的读者？那就<router-link type="a" to="/register">快速注册</router-link>吧</span>
					<div id="error_tips_box">
						<span class="error_tips">验证失败，请重新输入账号密码!!</span>
					</div>
				</div>
				<div class="login_but_box">
					<button type="button" class="btn btn-info login_but" @click="loginClick()">立即登录</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	import $ from 'jquery'

	export default {
		name: 'Login',
		data() {
			return {
				login_bodyBgImage: 'url(' + require('../../assets/img/login_background/login.jpg') + ')',
				username: '',
				password: ''
			}
		},
		methods: {
			// 添加body图片
			setBodyBackGround() {
				document.body.style.backgroundSize = 'cover'
				document.body.style.width = '100%'
				document.body.style.height = '100%'
				document.body.style.backgroundImage = this.login_bodyBgImage
			},
			// 清除背景图
			clearBodyBackGround() {
				document.body.style.backgroundImage = ''
			},

			loginClick() {
				this.axios.get('http://192.168.43.169/userlibrary/login', {
					params: {
						username: this.username,
						password: this.password,
					},
				}).then((response) => {
					if (response.data) {
						this.axios.get('http://192.168.43.169/api/loginquery/' + this.username).then((response_2) => {
							let user_id = response_2.data.data[0].id;
							this.$store.commit("setuserInfo", user_id); //更新userInfo
							this.$router.push('/homepage/' + user_id)
						})
					} else {
						document.getElementsByClassName("error_tips")[0].style.display = "block";
					}
				})
			}
		},
		mounted() {
			// 进来的时候调用添加
			this.setBodyBackGround();
		},
		beforeDestroy() {
			// 离开页面的时候清除
			this.clearBodyBackGround()
		},
	}
</script>

<style>
	.Login_box {
		margin: 60% auto;
		width: 80%;
	}

	.login_Tips {
		width: 100%;
		text-align: right;
	}

	#error_tips_box {
		width: 100%;
		height: 20px;
	}

	.error_tips {
		color: #DC143C;
		display: none;
		margin: 5px auto;
		text-align: center;
	}

	.login_but_box {
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}

	.login_but {
		padding: 10px 17px !important;
		font-size: 96% !important;
	}
</style>
